<template>
  <div class="always-container w-[210px] h-[210px]">
    <div class="waizeng" :class="[animation_status]" :style="`background-image: url(${WaiZengPng})`"></div>
    <img class="logo w-[85%] h-[85%]" :src="AlwaysPng" />
  </div>
</template>
<script>
import AlwaysPng from "@/assets/yongyuan/LOGO.png";
import WaiZengPng from "@/assets/yongyuan/waizeng.png";

export default {
  name: "AlwaysLogo",
  data() {
    return {
      AlwaysPng,
      WaiZengPng,
      animation_status: "animation-paused",
    };
  },
  methods: {
    play() {
      this.animation_status = "animation-running";
    },
    pause() {
      this.animation_status = "animation-paused";
    },
  },
};
</script>
<style lang="scss" scoped>
$size: 210px;
$logoSize: $size - 60;

.always-container {
  // width: $size;
  // height: $size;
  position: relative;
  // margin-bottom: 30px;
  .waizeng.animation-running {
    animation-play-state: running;
  }
  .waizeng.animation-paused {
    animation-play-state: paused;
  }
  .waizeng {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-origin: center;
    animation: rota 60s linear infinite, opacity 60s linear infinite alternate-reverse;
  }
  .logo {
    // width: $logoSize;
    // height: $logoSize;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}

@keyframes rota {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes opacity {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}
</style>
